<template>
    <svg width="160px" height="160px" x-mlns="http://www.w3.org/200/svg">
      <circle cx="80" cy="80" r="80" stroke=""
        stroke-width="2" fill="rgba(16,47,117,0.46)"/>
        <circle cx="80" cy="80" r="65" stroke="rgba(27,62,140,1)"
        stroke-width="8" fill=""/>
        <circle cx="80" cy="80" r="65" stroke=""
        stroke-width="0" fill="rgba(27,62,140,1)"/>
            <circle
      :r="65"
      :cx="80"
      :cy="80"
      :stroke="'rgba(0,222,255,1)'"
      :stroke-dasharray="arcLength"
      :stroke-width="8"
      fill="none"
    />
        <circle cx="80" cy="80" r="55" stroke=""
        stroke-width="2" fill="rgba(16,48,119,1)"/>
        <circle cx="80" cy="80" r="47" stroke=""
        stroke-width="2" fill="rgba(27,62,140,1)"/>
    </svg>
    <div class="textCenter">
      {{value}}
    </div>
        <div class="subTextCenter">
     入组率
    </div>
</template>

<script lang="ts" setup>
import {ref,defineProps,computed} from 'vue'

let props =defineProps({
    progress: {
      type:Number,
      default:'',
    },
      value: {
      type:Number,
      default:'',
    },
    color: {
      type:String,
      default:'',
    },
    height: {
      type:String,
      default:'',
    },
    width: {
      type:String,
      default:'',
    },
    left: {
      type:String,
      default:'',
    },
    right: {
      type:String,
      default:'',
    },
    radius:{
      type:Number,
      default:65,
    },
})
  let arcLength =computed(()=>{
    let circleLength =Math.floor(2*Math.PI*props.radius)
    let progressLength = props.progress * circleLength
     return `${progressLength},100000000`
  })
</script>
<style lang="scss" scoped>
.textCenter{
width: 300px;
height: 100px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
text-align: center;
width: 65px;
height: 23px;
font-weight: bold;
color: #ffffff;
}
.subTextCenter{
width: 300px;
height: 100px;
position: absolute;
left: 0;
right: 0;
top: 55%;
margin: auto;
text-align: center;
width: 65px;
height: 23px;
font-weight: bold;
color: #ffffff;
}
</style>